<template>
  <div>
    <el-card class="cardbox">
      <pagetool>
        <template #after>
          <el-button type="primary" size="small" @click="add">添加角色</el-button>
        </template>
      </pagetool>
      <el-divider />
      <!-- 表格 -->
      <el-table border class="table" :data="tableData">
        <el-table-column
          prop="title"
          label="角色名称"
          align="center"
        />
        <el-table-column
          prop="description"
          label="角色描述"
          align="center"
        />
        <el-table-column
          label="操作"
          align="center"
        >
          <template v-slot="scope">
            <el-button type="primary" size="small" @click="distribution(scope.row.id)">分配权限</el-button>
            <el-button size="small" @click="edit(scope.row.id)">编辑</el-button>
            <el-button type="danger" size="small" @click="del(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 弹框 -->
    <!-- 权限弹框 -->
    <el-dialog :visible="treeDialog" @close="cancel">
      <el-checkbox-group v-model="list">
        <el-tree :data="permissions" default-expand-all>
          <template v-slot="scope">
            <el-checkbox :label="scope.data.id">
              {{ scope.data.title }}
            </el-checkbox>
          </template>
        </el-tree>
      </el-checkbox-group>
      <span slot="footer">
        <el-button type="primary" size="small" @click="confirm">确 定</el-button>
        <el-button size="small" @click="cancel">取 消</el-button>
      </span>
    </el-dialog>
    <!-- 编辑添加弹框 -->
    <Dialog
      ref="form"
      :show-dialog="showDialog"
      @close="close"
      @reload="reload"
    />
  </div>
</template>

<script>
import Dialog from './components/dialog.vue'
import { getRoleList, delRoleList, getPerList, getDeatailRole, editRole } from '@/api/role'
// 树形数据
import { treeList } from '@/utils/index'

export default {
  components: {
    Dialog
  },
  data() {
    return {
      tableData: [],
      pageConfig: {
        limit: 10,
        start: 0
      },
      showDialog: false,
      treeDialog: false,
      // 总权限列表
      permissions: [],
      // 角色权限
      list: [],
      userId: ''
    }
  },
  async created() {
    // 获取角色列表
    this.getList()
    // 获取权限列表
    const res = await getPerList(this.pageConfig)
    // console.log(res)
    this.permissions = treeList(res, '0')
  },
  methods: {
    async getList() {
      const res = await getRoleList(this.pageConfig)
      // console.log(res)
      this.tableData = res
    },
    add() {
      this.showDialog = true
    },
    // 分配权限
    async distribution(id) {
      this.userId = id
      const res = await getDeatailRole(id)
      const arr = []
      res.permissions.forEach(item => {
        arr.push(item.id)
      })
      console.log(arr)
      this.list = arr
      this.treeDialog = true
    },
    // 确认
    async confirm() {
      const obj = {
        id: this.userId,
        permissions: this.list
      }
      await editRole(obj)
      this.treeDialog = false
      this.$message.success('修改成功')
    },
    // 取消
    cancel() {
      this.treeDialog = false
    },
    async edit(id) {
      // console.log(id)
      const res = await getDeatailRole(id)
      console.log(res)
      this.$refs.form.dialogForm = res
      this.showDialog = true
    },
    async del(id) {
      try {
        await this.$confirm('是否确认删除')
        await delRoleList(id)
        this.getList()
        this.$message.success('删除成功')
      } catch (error) {
        console.log(error)
      }
    },
    close() {
      this.showDialog = false
    },
    reload() {
      this.getList()
    }
  }
}
</script>

<style scoped>
.cardbox{
  margin: 20px;
}
::v-deep .el-divider--horizontal{
  margin-bottom: 20px;
}
</style>
